





اللرمبات بالفن07 شولا 


الدليل العربي الأول لأستخدام برنامج 
الفوتوشوب في اغراض برمجية 


الإصدار الأول 


تعلم البرمجة تأليف : إسلام سلامة 


0-0000 ع1 . الالالانانا‎ 2١-9771 


هام 


هذا العمل محمي قانونيا برخصة المشاع 
الإبداعي النسبة-منع الأغراض التجارية 
الإصدار 4.0 )إسم الكتاب والمؤلف علامات 
تجارية مسجلة لأصحابها . 


يحق لقارئ هذا الكتاب نشره بشرط ذكر 
المصدر واستخدامه فى اغراض التعليم بامدارس 
او نحوها بدون عائد مادى منه. 





لت يم اد . 
8. . ع ق 2515 6 ::.. ١‏ وك اق ل الى .0 ندا يي ل1. احص .» 1 3 ”3 0-١‏ 
البرمجة بالفونوشوب يواسصة إسامم ساممة مرخص يموجب رخصة المشاع 


ال 3 تيد 6 51 5 
الإيداعي نسب المُصثفف - غير تجاري - الترخيص بالمئل ().4 دولي. 


تنويه : لا تستخدم الكراك أو الكيجين أو سيريال غير مشترى قبل أن تفعل ذلك أنظر إلى 
فتاوى حكم استخدام البرامج الغير أصلية بغير حق اللهم إني بلغت اللهم فاشهد 


الكاتب بريئٌ أمام الله عز وجل من كل من يستخدم هذا الكتاب في ارتكاب امعاصي او نشر 
الفتنة و الفاحشة فما كتبت هذا الكتاب إلا لكي افيد غيري واعلم الناس مما رزقني الله من 


العلم النافع 
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العورس 





إهداء 
-مقدمة 
عن الكاتب 


الفصل الأول : الفصل الأول : الويب ديزاين 


© تصميم وبرمجة 
© الفرق بين مصمم الويب وامبرمج والمصمم 
الفصل الثاني : مداخل إلى الفوتوشوب 
© نبذة تاريخية 
© الواجهة 
الفصل الثالث : مداخل البرمجة بالفوتوشوب 
© التوافق بين التصميم والبرمجة 
© الطور البرمجي للفوتوشوب 
الفصل الثالث : التفسيرات البرمجية 
© التفسيرات البرمجية للمواقع 
© التفسيرات البرمجية لتطبيقات الويب 
الفصل الرابع : أساسيات ال أ آلا|11] 
© أساسيات عن ال ||/ا| !ا 


© مما تتكون ||/||]!] 
© التعمق في ال ||/| !]ا 
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«٠‏ 15لا 
الفصل الخامس : 055) 


ه 058 
© التعامل مع 088 


الفصل السادس : تصميم صفحات الويب باستخدام الفوتوشوب 
© تصميم الصفحات 
© مرحلة الإضافات 
« القسم الثاني : تصميم الصفحة أقسام القراءة 
ه عرض واستخراج الموقع 
« الحصول على أكواد 055 بالفوتوشوب 
© الجافا سكريبت في الفوتوشوب 


الفصل السابع : استخدام الفيجوال بيسك مع الفوتوشوب 
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إتخراء 


هدا الكتاب اهداء لء أمي وأبي 
حفظهم الله وإلى كل شخص شجعني 
على التطوير والمحاولة وعلى كل 
من دعمني بكلمة طيبة ووقف بجانبي 
ولعكل شخص لم يتغير ولكل شاب 
عربي طموح يطمح بالتطوير 
والبرمجة ولكل طفل وطفلة ومواطن 
ومواطنة يجلسون الأن تحت القصف 
الغاشم والعدوان الصليبي عليهم أدعو 
الله تعالى أن يحفظهم ويرحمهم... 
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عن الكاتب 
إسلام سلامة اورت 
000 5 11107 اج 5 اددج 
0 عاماً .. عربي مسلم والحمدلله » أدرس 
بكلية الطب وهوايتي وشغفي التقنيات 





© 


والبرمجيات ؛ قضيت العديد من سنوات 
حياق قِ البحث ومحاولة التعلم وبدنت 
أحياناً من الصفر أو ابتكار طرق وإلى العمل 
بالمصادر الحرة والألعاب ومحاولة ابتكار 
انظمة تشغيل وبرامج محاكاة (31 وغيرها 
من العديد من ال مشاريع . 
للتواصل : 
3 5211110 51 


.111111112115 مما 
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٠6‏ مه 





الحمدلله وحده والصلاة والسلام على من لانبي بعذه .. 


يأتق هذا الكتاب المتواضع في محاولة لرفع ال مستوى المحلي 
والعربي من رصيد الكتب التقنية التي تدعم المهتمين 
بالتقنيات بشكل عام وا مطورين بشكل خاص » وجائت 
فكرة الكتاب هذا بعد البحث الكثير عن المحتويات 
المختلفة التي للأسف شحيحة جداً في المكتبات العربية 
لذلك اسأل الله عز وجل أن يكون هذا الكتاب علماً نافعاً 
يستنذفع به للأمة الإسلامية والعربية . وحاولت أيضاً أن يلائم 
هذا الكتاب جميع مستويات المطورين سواء المبتدثين 
بشرح مبسط من البداية للغات أو المتوسطين والمحترفين 
بإعطائهم رأس خيط لطريق جديد في التطوير بإذن الله. 


والله ولي التوفيق 
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الفصل الأول : الويب ديزاين 
بابي , وبرمجة" 


في عالمم الإنترنت والتطور والتعامل مع الشبكات والأجهزة 
أصبح ا لمجال مفتوحاً أمام الكثيرين من المطورين وامصممين 
لإبراز مهاراتهم في هذا المجال . بدايةً لا يممكنك أن تكون 
مبرمج دون ان تتعلم لغة يفهمها الحاسوب كذلك لايمكنك 
توصيل المعلومة إلى الناس بدون واجهات مرئية 06101 سهلة 
الإستخدام إذ انك يجب عليك الجمع بين الإثنين وهذا 
مايشمله الويب ديزاين . 






| #دكهكهت 
2< ور 


كت ادا 


1 
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الفرق بين مصمم الويب وامبرمج وامصمم 


قبل البدئ في سرد بعض الشروحات أحبب أن اشرح الفارق 
بين بعض ال مصطلحات الشائعة او التسميات فلماذا عندما 
تبحث عن عمل في شركة ألعاب او برمجيات او شركة من 
أي نوع تجد انه يطلب كل تخصص لوحده ؟ او احياناً 
يطلب مبرمج مع خبرة في الفوتوشوب أو التصميم بأي 
برنامج أخر ؟ وهنا يكمن الفرق فال مصمم هو شخص 
متخصص في التصميم يمكن ان يكون بغرض الدعاية 
والإعلان او تصاميم رسومية او واجهات او مواقع فقط او 
(31دون خبرة برمجية ما يصممه . المبرمج فهو العكس 
يكون ذو خبرة برمجية بإحد اللغات التي في تخصصه أو 
احياناً عدة لغات «مطنءوط ١ 0++ ١‏ أعم.0# ١‏ أعم.78؟ 
وغيرها . مايفعله مصمم الويب هو الجمع بين البرمجة 
والتصميم لغرض إنشاء تطبيق او موقع للويب ويتفرع هذا 
الموضوع إلى عدة مواضيع فيشمل تصميم واجهة الموقع 
واستخدام لغات لتفعيل استخدام هذا التصميم مثل 

13م 11131.1١ 055 ١5١‏ وهذه مجحالات واسعة اذا 
يطول الشرح فيها لذلك كان المقصد من هذه الشروحات 
التركيز على استخدام الفوتوشوب بالوجهين كبرمجة 
وتصميم. 


2 . 2223 3ط /عده» . 58 | تعلم البرمجة | «دهن . 222203 ةط عد د16 . جم 


الفصل الثاني : مدخل إلى الفوتوشوب 


نبذة تاريخية 

الفوتوشوب ليس برنامجاً جديداً بل في 2015 دخل برنامج ادوبي 
فوتوشوب لسنته ال25 .. هذه المسيرة الحافلة بالنجاح على مستوى 

تصميم الجرافيكس جعلت من الفوتوشوب الأول عاطياً في دمج 
وتعديل الصور . ولكن مع تقدم التقنيات وتزايد المعلوماتية م يعد 
يقتصر الفوتوشوب على الدمج او التعديل انما بدئ يتحول إلى اداة 
برمجية , وهذا ماسوف نشرحه في هذا الكتاب بإذن الله وهو أخذ 
طمحة شاملة عن الأمكانيات البرمجية للفوتوشوب لأن الأمر م يعد 
يعتمد فقط على المصممين إنما الجمع بين التصميم والبرمجة كما في 
الويب وتطبيقاته» أول إصدارات الفوتوشوب ظهرت عام 1990 حيث 
كان أن ذاك قفزة نوعية في مجال الجرافيكس حيث م تكن هناك 
برامج عملية كما نعرفها اليوم وم يكن التصميم او تعديل الصور 
بتلك السهولة حيث في تسعينات القرن الماضي كانت تكلف تعديل او 

تصميم صورة بالفوتوشوب حوالي 300 دولار أو اكثر لصعوبة 

إستخدامه ! » فوتوشوب 1.07 1 


6010 
1010512010“ 


١11١| 5[| ١ها‎ 1011 1 ).7 


13 566 ,[[14761 دحتحاه[ بلزمدن! 11101065 
تللم العدوكبن[ دنج 


0018460 كددك):5 عجاملكىمة 1989-90 © أداع11/(ج0ر) 
علا كدنة جرمجاكم6)مر٠اط‏ عملم ,لم عت كاداع1: [لم 
عجاملم )0 ىاتهددهل :1 عرح 30 جمجاوموجاط عحاملكىمق 
011 5151115 


]ا بمخنام رهن عامجيف 1987 ,1986 ,1985© اذ 7ررجرفمح]١ا‏ : 101 ل ألهدرهيرع<] 
ع لاون الو و بج ماد 


0 
.-.185-وناا؟ أناه ماق 0 
: و ل ال ار وح لاله 
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التصميم الجرافيي للموقع ضروري جداً حيث 
أن لامكن الإعتماد على البرمجة 0065© فقط 
للمواقع او تطبيقات الويب . هذا سوف يكون 
متعب جداً ولن يكون لديك نظرة عملية حول 
ماتفعله قبل ان تكمله . بالأحرى عند البدئ 
بخطة العمل والإنتهاء من مشروعك ووجدت 
فيه او وجد فيه الزبون مالا يريد فسيتحتم 
عليك اعادة التعديل على الكود البرمجي وذلك 
سوف يستهلك وقتاً كبيراً + انك اثناء البرمجة 
سوف تحتاج إلى الكثير من التجريب والخطأ 


بالنسبة لموضوع الواجهة 
ا/ا | طعا - م 5 0 


ا/ا! | م - 





5)- 
5 65 010/ا/ا - 
أ3ماع - 
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الواجهة 


يتميز أدوبي فوتوشوب بواجهة مميزة و مرنة جداً ومناسبة لجميع المستخدمين , منذ 
بدء اصدارات الفوتوشوب المتقدمة 054فما فوق بدأ تحسين الواجهة بوضوح في كل 
إصدار من هذا البرنامج وهذا في اعتقادي من اكثر ماميز الفوتوشوب عن غيره من 
البرامج . في المثال ال موضح بالصورة واجهة فوتوشوب 002015 أحدث اصدارات 
الفوتوشوب الحالية » نرى على اليمين قائمة الطبقات المشار لها بالسهم الأحمر تقريباً 
هذه أهم القوائم بعد قائمة الادوات لأن اغلب البرامج تفتقر لهذه القائمة / القائمة 
المركزية المشار إليها بالسهم الأزرق وهي تحتوي جميع أوامر وخيارات الفوتوشوب 
وهي أكثر ماسوف نحتاج إليه في تطبيق الدروس في هذا الكتاب . واجهة العمل المشار 
إليها بالنجمة الصفراء قابلة للتعديل والتغيير . 


غأمع دكن زلد ود للم 
7 25 86 يفف 20 
:ا أ ار لالع م 
ه) اغا ان اد العا 


39 81 طن( ك0 ات 





مه 
3 
7 
ل 
بر 
2 
2 
5 
7 
92 
لم 
01 
2ه 
و 
0 
رج 
ل 
2 
31 
ع 7" 
- 
لسر 


واجهة فوتوشوب قابلة للتعدليل بشكل كبير حث يممكن 
اضافة القوائم أو ازالتها وتغيير الوانها على حسب ذوق 
ا مستخدم والاريحية البصرية 
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التوافق بين التصميم والبرمجة 
انتجت شركة ادوبي برنامج الفوتوشوب لأغراض التصاميم 
والدمج والتعديل على الصور لكن احتياجات العام ازدادت 
وخاصة ا مطورين والمصميم اذ لايكفي فقط الوقوف عند 
هذا الحد. 
يضم برنامج الفوتوشوب عدداً من امكانيات مداخل 
البرمجة بدئاً من برمجة الفلاش أو اضافة السكرييتات او 
تحويل الطبقات الى كود 255) وكذلك فيما يضمن تحويل 
بعض الطبقات او التصميم كامل إلى .1123/1]. 
أغلب المواقع المصممة حالياً على الويب تعتمد على 
الفوتوشوب كأساس لتصميم اللوقع ولكن هناك وجه 
برمجى ف الموضوع سوف نتحدث عنه بإذن الله . 


ع امام 


6ت »اليا 3220 


65خ ل زنااا 


ّ 
"زا اثازات 


نا كزواف وتنردقع 
تكبدوية| 0 "زا 
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الطور البرمجي للفوتوشوب 
يدعم فوتوشوب الأتمتة الخارجية من خلال البرمجة النصية. في 
نظام ويندوزء يمكنك استخدام لغات البرمجة النصية التى تدعم 
أتمتة0011 » مثل .]م5 778 في ويندوز ء وأيضاً يمكنك 
استخدام لغات مثل 6م165©11مم8 التى تتيح إرسال أحداث 
.1ممث تلك اللغات غير متاحة عبر الأنظمة الأساسية لكنها 
تتحكم في تطبيقات متعددة مثل الفوتوشوب » و ©4005 
1 .01112 11110501 ني نظام ويندوز : 
أيضاً استخدام 101 1025)ع34 «رملاوه)0ط2 5 عاممم 
17 للتحكم ف اطهام في الفوتوشوب 
استخدامع8ط]م 22511[ الجفا سكريبت على أي نظام أساسي 
يتيح لك هذا الدعم كتابة برامج الفوتوشوب النصية التى تعمل 
على أي من نظامى التشغيل 118120015075 أُو05© ع112 . 
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الفصل الثالث : التفسبرات البرمجية 
التفسيرات البرمجية للمواقع 


بالحديث عن مواقع الإنترنت او الصفحات يمكن للمبتدثين 
التسائل كيف يعمل هذا الموقع او هذه الصفحة او غيرها 
لذلك سوف نقوم بتجربة بسيطة لمعرفة مما يتكون هذا 

الموقع الذي أمامك ؛ *سنستخدم متصفح جوجل للشرح * 
يمكنك فتح أي موقع ترغب به سواء مدونة او فيسبوك او 
غيرها من المواقع . ثم اذهب إلى القائمة المنسدلة وابحث 
عن 10015 81016 ثم اختار 25 3286م 5376 بعدها قم 

باختيار مسار الحفظ في مجلد جديد 


اكات لح حر ايك بوبح لخ 


انثه اأعلالنا صا امومعهر علخ 


2 لواستظلم 
قت اونا 


ع رةه 


3 5 
ا + 55لا 10‏ - 1 


امم 
..لموراط 









.35 لهم عناوهة 
..اقطاعاكق] ها أوامثر 


كاصمة عرو ابلا 


م لامها اناما ئلاعة 


..قأقك وصتكشتص]ءط روقعان) 


5515 
0005 

2 حراعنا 
1 وقمقص عاوق | 
ععمم 8 كتكتمل مالالا حا عسممعط طاعصسوواعم8 2 ولك معورع 


ازع 5أصم] زعم واعياعن] 
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الأن توجه إلى مجلدك الذى حفظت به الصفحة وألقى 


1 على اطلفات التى قمت ب حفظها واطلع على الصيغ 
الخاصة بهذه المطلفات مثال كما قٍِ الصورة : 











52 عمينا1 001110 عغ03ا 1 عملا 
559 عو 6 مي ١‏ تالمع تي مح يعن رياو مع دريعيرف ربع 
56 عا 5ل 05:54 م 2016/02/08 ...ة66ع3ط5ع5ع39023882ع61طءع0ع0.5059م]اناط إكل 
66 عا 5ل 05:54 م 2016/02/08 5[. 7646 945494681653-طنام-قء إخ 
8 114 عا 0_ناغداثفش ١0‏ 05:54 م 2016/02/08 0ملع30ه.امووءتطء ل 
68 61 ع1 1_داغداظ 0 05:34 م 2016/02/08 1_لعء0دها.امقوططء نى 
68 103 ...00 اثابا ل عجممعطنم 4 م 2016/02/08 احصغط.ز1)ءعصاوغممء © 
01١... 81 8‏ 111لا عمممعرطع 05:54 م 2016/02/08 اصصغط. (2)مع متوغمم © 
68 4 ...00 ااا ] ل عجممعطن) 4 م 2016/02/08 امغطمع متوغمم © 
6 ,6 عا 5ل 05:54 م 2016/02/08 كل أقطاك.و ا لصضاطع-صصممصقى.والصاطكى-عم دعم إزنى 
3/8 ع 05:54 م 2016/02/08 5 [ | 
368 عازع 4 م 2016/02/08 ([)كك [ | 
68 18 عااع كذ 4 م 2016/02/08 ككع. لال ققطء دوقعل 0-1 
9168 عا 55 05:54 م 2016/02/08 ككع. لام اناواءع0 1 
68 17 عا كذ 4 م 2016/02/08 ذكع,لاعغ]ع5, أناوقء0 [ | 
68 151 عازع ذل 4 م 2016/02/08 1(5)لء طدمقع_وماكضومميه إن 
8 151 عا 5ل 05:34 م 2016/02/08 7720.5ع_305100م) إن 
68 11 عا 5ل 05:54 م 2016/02/08 136/315 إن 
68 38 ...00 ااا ل عجممعطنه 4 م 2016/02/08 اممغطممغن طدو © 
:5 عا 05:54 م 2016/02/08 عا ل 
:5 عا 4 م 2016/02/08 ([)لمعاماةة ل 
9166 عا 5ل 05:54 م 2016/02/08 1017-15 إن 
8 43 عازع 5ل 05:54 م 2016/02/08 5[ّهو [غا 
3/68 عا لكام 05:54 م 2016/02/08 
3/8 عا 6لخام ‏ 05:54 م 2016/02/08 
1 داع > بعكن _ وم/ جدومرع مد مم 2 


لاحة 
امتدادات الملفات " الصيغ " سوف تجدها " [ضضغط. أو 
5. أو 5[. وغيرها من الملفات الغير معرفة مثل ©1]. 


مجموعة هذه الملفات هي مايكون ال موقع او الصفحة التي 
تشاهدهاء حيث يقوم ملف ال ,111311 بربط باقي 


اممفات مع بعضهم ويقوم المتصفح بترجمة الملفات والاكواد 
المكتوب بها ويعرضها بنفس التنسيق المطلوب. 
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التفسيرات البرمجية لتطبيقات الويب 


فكرة تطبيقات الويب مشابهة جداً للمواقع واحياناً يمكن 
تحويل موقع مبرمج بال 1511211:5 و 055) و 5[ إلى تطبيق 
للهاتف او كتطبيق ويب » احياناً يكون التطبيق اكثر تعقيداً 
من بناء موقع يعرض فقط على المتصفح وتستخدم 
محاكيات كثيرة لبناء هذه التطبيقات باللغات التي ذكرتها . 
ثم بعد ذلك يعتمد على سهول تصميم واجهة الملتسخدم 
بحيث تتلائم مع اختلاف الحجم والمقاييس . مثال الصورة 
توضح واجهة دخول لتطبيق هاتف مبرمج بال 11112/1.5 : 
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نمثل لغة ال .1112411 الوحدة الأساسية لبناء ال مواقع 
وصفحات الويب وتعني اختصاراً لحملة غ<ء'1' 1©م17] 
© ل م7121121 وتطورت هذه اللغة منذ بداية 
ظهور الأنترنت وصولاً حتى الجيل الخامس حالياً فلم تعد 
تقتصر هذه اللغة فقط على الانترنت وصفحات الويب 
وامواقع إنما ساد إنتشارها لتصبح مساهماً رئيسياً في بناء 
تطبيق ال 11712010175 ١1 005 ١‏ 420010 وغيرها من 
الإستخدامات . تم تصميم .111211 لكي يتمكن العلماء من 
إنشاء مستندات نصية تحتوي على أوامر تنسيق أساسية 
وارتباطات إلى معلومات أخرى أي نصوص تشعبية أو 
تشعبات » فكانت بعد ذلك إطار رئيسي لنمو الويب. 
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مما تتكون ال .117112311 
تتكون ال 111241 من وسوم مقسمة حسب الوظيفة 


يتم كتابة هذه الوسوم او ال1285' في ملف نصي عادي 
يكتب فى أي برنامج نصي (على سيبل اطثال 7220ع5106) 
ويحفظ بصيغة .111311. أو 11:136. . ويحتوي هذا المستند 
على شفرات خاصة تسمى ( وسوم "أوامر" [21نا/] (1285' ) 
توضع عادة حول مجموعة من النصوص .ء تلك المجموعات 
والوسوم تسمى عناصر (1816726265) ويفسر مستعرض 
الويب مثل موزيلا فايرفوكس أو قوقل كروم تلك العناصر 
ليحدد كيفية عرضه على الشاشة. في معظم الأحيانء يملك 
كل عنصر في .111211 وسم فتح ووسم أغلاق ويتألف وسم 
الفتح من إسم الوسم مع أشارت أصغر من وأكبر من < و > 
وتستخدم الإشارة / للدلالة على إغلاق الوسم . 
مثال :- 
لإفتتاح أي صفحة ويب أو مشروع او كود تطبيق يجب أن 
يعرف المتصفح ان الذي كتب هو كود .1112411 وان 
المكتوب يخص صفحة ويب او المحاي يريد أن يبدأ بقرائة 
الكود الخاص بتطبيقك يجب أن تكون البداية بوسم 
تعريفي لهذه اللغة لذلك يستخدم الوسم <:111211> 
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كبداية ويستخدم وسم الإنهاء له قٍِ اخر سطر قٍِ الصفحة 
<.111/1/> 

وسم الرأس <11630> ويوضع في بداية الصفحة بعد وسم 
الإفتتاح ال <1111041> ويستخدم لغرض وضع معلومات 
الصفحة به أو إسم الصفحة أو معلومات 21668 والتي تمثل 
معلومات عن هذه الصفحة او هذا اموقع وهذه ال معلومات 
لاتظي قٍِ واجهة ال متصفح . وبنفس الفكرة فأنه يغلق 
بالوسم <116»20/> 

وسم العنوان <11)16>وهو يستخدم لوضع عنوان الصفحة 
الظاهر في شريط المتصفح ويقفل بوسم الأقفال بعد الإسم 
مباشرة <1016)/> 

مثال قم بفتح المفكرة 20م70:6 وكتابة هذه الأوامر 
واحفظها بصيغة 21طاط. ثم ثم بفتحها بالمتصفح : 


< | مطغخط> 
<6230> 
<8-ع [ لا "نامث رومع وخهمم "> 


<م116]/> أعع زمعط مع موأوعنا أوراع<1116> 


<8- ]لداع ىاقطء زامغط لاع" أمعخممك "عم امعخمم )"2 /اأرامع-مغغط وخأعمم"> 
63> 
1 /> 





ا ١‏ ا أعهرمم8 ععمواوعن] غورط 5] 1 هكذا سو ف تكون نتيجة ظهو ل الكو . فى 
أعع زوع عمواوعنا ورا هه المنتصفح ث العنوان بالأعلى 








ملاحظة : <8-]]راتاعداقطء زامغخط لاع" أمع مم "عم -أمعخمم0""ت/ أب مع-مغغط وخعمم"> 
يمكن عد إستخدام هذا الأمر وسوف تظهر نفس النتيجة إنما استخدمته لتوضيح كتابة وسم 3+ع/1 فقط 
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التعمق فى ال.111173/11آ 


بعدما تعرفنا على ماهية ال .1112/11 وكيفية البدء بعمل صفحة بسيطة من 
العنوان وشرح وسم المجمل <آ1112/1>ووسم الرأس <11640>سوف 
ننتقل للتعمق قليلاً في الموضوع بالتعرف على باقي جسم الصفحة . 
باقي أجزاء الصفحة تكتب تحت وسم الجسم <5007> وهو المسؤول عن 
عرض محتويات الصفحة من عناوين واخبار وكتابات وصور والخ... 
يمكن الكتابة وتعديل النصوص داخل هذه المنطقة بأوسمة كثيرة منها 
الوسم <4026>الذي يتضمن العديد من الأوامر مثل الحجم 5126 واللون 
0601 و نوع الخط عع26] وغيرها الكثير 
وسم فتح الخط العريض هو <8> ويكون وسم إغلاقه محصوراً بين الإشارات 
أيضاً ولكن في هذه الحالة توجد شرطة أمامية قبل إسم الوسم <8/>. 
ويوضع النص الذي سيتأثر بالوسم بين وسمي الفتح والإغلاق وكذلك انواع 
الخط الأخرى مثل <1> <17>مائل وتحته خط ... وعند قيام المتصفح أو 
امحاقي بترجمة الكود سيظهر النص ال مكتوب بين الوسمين. 
مثال لعدة استخدامات لأنواع الخطوط : 


خاسةة 

<رامع > 

!])] شدلك إخكر ]ص7 
الس 

6 

<8>خط عريض</6 > 


+ خط مائل- 2 /|- 

<لا>خط تحت الخطح/لا> 

<عنامط"-60108 280011"> تغيير لون الخط</01/1]> 
ا سير كت الك 71 
<"'ومروطة1"-286025 20111"> تغيير نوع الخط</20111> 





ال 110/1!ا لها أكواد ووسوم عديدة جداً يطول ويطول شرحها اذا كنت تريد التعمق فيها راجع 
محرك البحث قوقل وسوف تجد العديد من الدروس والكتب المفيدة للتعلم . 
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ذال 1ك 


كما ذكرنا انه ال 177/11 وصلت للجيل الخامس وكان 
هذا الأمر ضروريا حيث أن الاجيال السابقة لم تعد تلبي 
احتياجات ومازالت هذه اللغة في تطور مستمر حتى 
يومنا هذا وباتت أغلب المتصفحات تدعم ال 171/15] . 
ما فكرة 110/15] ؟ 


هذه اللغة ناتجة بتعاون ع36.018//ا و 811١/6‏ انالا 
حيث تحمل قواعد اساسية مثل : 

© الإستغناء الفلاش وهذه أهم الخصائص 

© البناء والاعتماد على غ310/3561710/ .و ,55© ,ا/ 1لا 
/01. 

© العديد من الأوسمة الجديدة 

© إمكانية تشغيل مقاطع الفيديو والصوت 

© العمل على جميع انظمة التشغيل مثل مافي التطبيقات. 

ه امكانية التعامل عم !|0146 

©» اصبحت شريك اساسي في تطبيقات الهواتف الذكية 


1 ٠ ٠ 
7. . و‎ 
1 تسا‎ 8 
| مدا ل‎ 1 
7 ١ 8 
0 م‎ 
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كما ذكرنا ان جميع المواقع مكونة من هيكل بنائي الا وهو 
ال 181لا ومع تطور الانترنت والشبكات احتاج الناس إلى 
تنسيق اكثر للصفحات واعطاء شكل جمالي لمحتوياتها لهذا 
قامت منظمة 36//ابتطوير هذه اللغة الخاصة بتنسيق 
صفحات ال 8/1 11] . 


5 هي اختصار لي 15ع 586 عال/إ+5 63563011208 
5 تهتم بتنسيق الألوان والاشكال والخطوط والقوائم المنسدلة " 
السلايدات " والتحكم بدرجات الألوان وتدرجها والخلفيات وجمالية 
السفحة من كل ريحي , 
استخدمت 055 لأول مرة بسبب الاضطراب الذي حصل اثناء 
تطور شبكة الانترنت حيث اصبحت عدة وسوء متثلفة فى ال 
111ل بين المتصفحات هذا السبب جعل من قراءة بعض المواقع 
مختلفا بين المتصفحات لهذه السبب كان يجب إطلاق لغة لتحل 
محل تنظيم وترتيب وتنسيق الموقع وتكون متشابهة لدى جميع 
المتصفحات . 
مع تطور ال 6055 ووصولها إلى الجيل الثالث حالياً اتاحت امكانية 
كبيرة للتعامل مع مختلف تنسيقات العرض بالاجهزة مثل الهواتف 
الذكية واللوحية " التابلت" واجهزة الكومبيوتر وحتى 
الساعات الذكية 
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التعامل مع 655 


يوجد تشابه كبير بين 055 و 112/1 وتشابه العديد من الوسوم 
والخصائص اي في حال تعلمك ل 711/1] لن تجد صعوبة أبداً في تنسيق 
صفحة باستخدام ال 655 


كتابة وسم 055 يتألف من 3 اقسام : 
المتنقي ,0+عع|56 
الخاصية ب+مرع ممم 
القيمة عداد" 


[: 3106لا : لإاأمعممعه ) عمم6غع16ع5 


يمكن ان تكون اسم او رقم مثل_>202> بمكن أن تكون لون وسم .111111 ي 
00217 همه ازرق أو عساظآ الخلفية سيتم تطبيق عليه 
امأدت-لكسناممرجععاعهطا 1800 الخاصية مثل 


اذا اردنا مثلاً ان نعين لون خلفية معين مثل الأزرق 
ا 


باستخدام ال 1471/11 سوف نقوم بذلك : 


< ”عع686010-520000 /ا200> 


أما باستخدام 055 : 


زوع 200002 :0100ع-00ناممع>اء13 /ا800 
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الفصل السادس : تصميم صفحات الويب 
باستخدام الفوتوشوب 

كما ذكرنا أن ال 1710/1 هي حجر اساس بناء المواقع 
وصفحات الويب إلا أن هناك عوامل اخرى داخل في تصميم 
وبرمجة المواقع ؛ وكما ذكرنا أيضاً ان الفوتوشوب يستخدم 
لتصميم الواجهات لذلك سوف نتعلم تصميم واجهات مواقع 
بالفوتوشوب تمهيداً لتحويلها إلى كود 478/1 . 


بداية تصميم المواقع بالفوتوشوب يختلف عن التصميم العادي 
أو الدمج لانك سوف تحتاج لقياس جميع الابعاد المناسبة 


وليس مجرد وضع صورة فوق الاخرى اي بمعنى حساب 
5ع معينة لكل طبقة تقوم بإضافتها . 


لتسهيل الموضوع سوف نقوم بتقسيمه إلى عدة أقسام : 
1 تصميم الصفحات 
27.مرحلة الإضافات 
3 مرحلة تصميم اجزاء القرائة والدعايات 
4تقسيم وتجزئة الصفحة 
5.بناء كود 471/1] للصفحة 
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تصميم الصفحات 


بداية نقوم بفتح مشروع جديد بالفوتوشوب واختيار نوع 
الصفحة كصفحة ويب " عع3م معنن " وافترح اختيار 
المقاسات المعدة مسبقاً لأنها جيدة 


2 تاعثانا | عم[ ألرع1)نصمن 2 0 


.تاقوعم عيام5 (58”/ ,1356] تمتصلصمن غأوما" جاعلائا | تعمزك لتدهطاكايم 


..نأعوعمم مأعاعن ‏ | حاعم ]1 رواععرزم - 
5 
ماعن 








عع نويلم - 


5 (71201الاعءهنا ألا عو3مةا"ا )ماما مهنا | تعالتمه رمام 
:]5ك م1120 


ا"الانا.كت 





نختار ألوان مناسبة لصفحتنا من قائمة الالوان بالأسف اخترت الرصاصي 
والرمادي بتنسيق ألون 9239#+ و 727272 واستخدام أداة ال 1001 
66301601 لعمل تناسق جميل مابين اللونين كما في الصورة : السهم الأحمر يشر 
إلى اداة عمل الغ1مه63016 : 





ا 
تم 
# 7 
م 
54 
طِ 
7 
3 
1ه 
مد 
2 
قر 
1 
+ 
فت 
فلل 
3 
+4 طلا 
0ك 
1 
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مر حلة الإضافات 


في هذه المرحلة سوف نقوم بعمل اطارات ونوافذ واشكال داخل الصفحة لإعطائها 
رونقاً من الجمال والاستخدام المناسب للأزرار او الاعلانات او من هذا القبيل . 


لن نحتاج إلى استيراد اي صور خارجية من هذه الناحية فالفوتوشوب يحتوي أساساً 
على اطارات واشكال /مغعع/ قياسية قابلة للتكبير بعل الاحجام دون التأثير على 
جودتها 


مه1! عاومهععة نر 0 


غلا 
1- 
١‏ 


لل عدي لاني إلض) - 


4 





الأن سنختار اي شكل نرغب به لعمل قائمة بالأعلى مثال شكل مستطيل منحي 





ثم نقوم بعمل دائرة صغيرة لتكون هيا الزر الرئيسي للقائمة 





من قائمة الفلاتر نختار 300150156 لإضافة لمسة تشويش على الدائرة 


الاء اراع]ه | 








لتكملة بقية أزرار القائمة قمت بعمل نفس مستطيل القائمة ولكن بحجم اصغ, 
واخترت لون رمادي ادكن لعمل الأزرار ووضعت عدة ازرار بمسافة صغيرة بينهم 





الأن اضافة النصوص للقوائم 


نعكة | سين عييلعكت لعفن ل «لتلهًا| حكليك 





بعد أن اتممنا القائمة الرئيسية ننتقل إلى عمل باقي الصفحة والتي سوف تكون 
متكونة من قسمية قسم رئيسي وقسم جانبي للآشياء اخرى مثل عرض محتويات او 


اقسام الصفحة مكونة من مستطيلين افتح باللون لسهولة الانتباه والقرائة 


كت لايس “ان كفم كته حكليك 





ألوان وتناسقات الصفحة تعتمد على رغبة المصمم هنا بعض التناسقات التي يمكنك 
استخدامها : 
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القسم الثاني : تصميم الصفحة 
يكون هنا لدى المصمم خيارين إما جعل المحتوى ثابت اي بتفصيل صور داخل 
مكترى الث اد ار حملي لالفكترى على شي كير ذلك بر اسطنة الكرن ركنا 
عمل ظل لأقسام القراءة 


| اعقع رونا | 


| .اماك حزعلمر | / ]| 0 
نالا العم [#يد] اونا اهماما عدلا ]5 0 إ ٠:‏ تج 


*م|] 3] أ 00 
| 16] اتج بين ربيب 
*م| 15] 57 وريب 





بالنسبة لمحتوى القسم سوق اقوم بعمل مثل الدعاية لشعاري ووضعها داخل القسم 
الأول " اليمين" . كما في الشكل النهائي 


تقطيع الموقع بالفوتوشوب وعمل روابط 


دحلم ع نيليا حارذ 0ك فحللت فتلت جهن" 
كأه تاممن) مه أكمة 1 ثوو لاد 


ل ا ل اك ان ةا د 
5 
لا 


كك يي كييلعك العاف إكلحنف حييك 


59 يه 8" الآ ون 9ه 
هآ اغا امن 2 انما 
5 ككعبود ] 
- إلى غز 1 © إن 23 00 م 
> 10096 #لاعدم0 |2 أقحمءهل؟ 
> 10086 :لاك 8 ل 10 عمتععلوط )0 ا 
فلستطب* 
ال ا مد فى دولةفلتطين ‏ 
سل 


2 0 

هارت [[->ا © 

لا ا د كا علأومععنانا م1 © 
0073© |[ ا © 

تلوت" © | ا © 


10 تعره ]+ - 0 ره 0 ا 
9 ععبرها |[ | 3 
نظ 317 ان 
ااع 
> :8 
31 ها 
5 7 1 عاومدععم 5 
لذ [_ا رص (* ثم 5 1 71 3.0011 :عم 





حا ا لي لبان حي لبا مك كان 
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بعد أن عرفنا كيفية تصميم واجهة صفحة جميلة باستخدام الفوتوشوب حان الوقت 
روابط وتفعيلها لأزرار وقوائم الصفحة الخاصة بك . 
علينا بداية أن نعرف كيفية تقطيع كل جزء في الصفحة ومن ثم وضع الرابط 
الخاص به عليه من خلال الفوتوشوب . 


سنتستخدم لهذا الأمر الأداة زمهمتمعء|؟ 


أنه 1 حصنا ع 


ا عر" ريسا ردك 0 
5 قر 


امت 1 معز 


سس 
له -ددهات سيم 2 





الأن نقوم بتحديد كل زر او خانة تحتوي على رابط لوحدها بواسطة الاداة التي 
ذكرتها » مثل مافي الصورة 


بعك لوسليسن عييلعن) لعفن الللتة 51 


جات ناث 





الأن نقوم بالضغط بالماوس اليمين على مكان التحديد واختيار 5م0غ8م0 مع 5|1 غز0ع 


ونضع في خانة 81لا الرابط الذي نريده على هذا الزر 
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عرض واستخراج الموقع 





بعد أن قمنا والحمدلله بتصميم وتقطيع الموقع حان الأن دور عملة نظرة عليه 
و استخر اجه لأستخدامه 
الفوتوشوب يوفر هذا الموضوع 
من قائمة ه11 نختار +01م«ع] 
ثم نختار الخيار 6ع/الا ,مغ ع/اج5 
ذلخاط كة ممع عاءارالا يي أرممط 
ارا | + ]اك جارثر .كط أرممط اخ 1ع لمعا 
مقع تاقطعظا دنه عرمطذ 
ذع ]اع ]اذ جنام 
...امع امعطممعغ عمواظ 
اناظ مغ كنرههطا ريم ...قعاصلا ععواض 
كع ]اط 10 كم 3م) رع/زة | .ع ووعاعوم 
انال ها كمحصم) رعنزة | 
ع عغخم ورت 
علاط هخ ورعتزقا : وذ 
.عاطة] تنطامم ا ,مامح يي 
1 هرهم 
سكع ألا 35 كاء5 13لا 
اا + ]لك عنام هلما عاط 


تظهر لنا العديد من الخيارات منها اختيار جودة الصورة وعرض صفحتك على 


المتصفح وحفظ الصفحة 
عرض وحفظ | : لصفحة 


عنانووعروممم [ ) 
لع زمقم0 |7] 
عاقمعم وام معطوع [ ) 


ا ليرا 


ماعلا 0 لل 


28 ما +ع ممع |7 ] 
ماه عمغأامما! ‏ :باع زبعرم 
مكأق1 أعقطاوه لداة أداولامه0 | :تذأدلواء 1 


- عاطة] عمام6 


ْ 9 الب با 1 
عترلاوء لوط 53601 


522 173908 
]1 100 :أمعممعم ول »تكن :* 
31 عاطنه8 | :لأأأق © “ام له 
6101 
006 :كممتام0 ودامهه ا 


ا م اال 
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الآن بعد أن عرصت صفحتي من الخيار لياه إراعء م تظهر على 
ا 
هكذا تظهر الصفحة الموضوع يشعرك بالفخر (]: 
الفوتوشوب يقوم بعرض كود ال 71/1!] لك بإمكانك التعديل عليه لاحقاً 


ولك كة يي 66 60.1 © حاص حكليك- 





اا 
طة76 1366 :عددةكم ص10 
121971 ندساة 


5 :عدممسا 
مه لدسنس م0 يوتانمعد جود ره-ده1!1 ,60 هذ “لهس -مدعسدة 


حتهوظ» 
جهج :282-14 تح جوحجه :21> 


25ج« وو حسهك ‏ : تس« موت "مناجسواجدت "وجن1- نجووحده "م نوجه-ج+ << مداه 
<"وطت وح حوج"«اجوواجدت "مدوسعج "«تتمجهو-ج*<ذ هحما2هه 
<"ونتيوح حو" «اجوواجدت "1و نجودد- ومطدوع "سه لت 
"0 "«اجوواجدت "توصتجمه "ميهج هذ مدان 
حدتسه5 »> 
<ه"سوجج وتجذو هه "5" سجطنة 1 ماتجتودعه "75 ""«جتو ع ميت هت *7535لاة"« منددوط رددقظه 
ار دجو[ أ 21جك] جه5ة521 طذد؟ عدك وجمء --[1>» 
<0؟ مج جتج هج 2ه "5 مج جتخكةهسج: 2هه "هتح هط "759 "م«ططجة»ه< "21555"س25:ةة "031_متطه"عضة هتطه:>» 
جع1>» 
"53 "«جسجج :5ت 23> 
نه عد 1ه "521 "«#طجتهظ "2555 "«طعشة "120716525615551 071_جتتة_ناهة هت 7اجعدياوح5"مدعع وجة»>» 
جع »> 
جع2>» 
"5" «جهجدمد- 42334 
<جدج!' عح 1 #طوقهذط "163 "«طدضة» "172071655615553 02_جنت_أمة وح #اجهوينح5 »دح وة>» 
<ة2»> 
جوج رح مدنو #طتجةهظ *77"-:<:3ة١‏ "177164556353551 05_جتت_الهة وح 7 هلندماتع5" »ع هدنة> 
"5 "«جهسجة:دت 23> 
حدجار 1ع "1 "«#تتجتهظ "98غ3:«"116ة١‏ "125716455615551 76_جتتت_انهة وت اياوح 5 "دعم وجنة»> 5 
جع »> 
جع2>» 


"2 "«جسجدياودح "2 "«جهجم :5ت 23> 


كج 5:2 اس ع 5822© شيا عسي 2212 © سساهك عب 12 جك م جاع 2 5س ل 8 عست لمعم سمس اس سس سم #8 ساسم سس 2 


الآن نحفظ الصفحة من الخيار 5310/6 


ونختار 5عع603 !| .8 11/1!ا 


لمتطاعودط نرانا ظ 
ممما مه 1101لا 


سيصبح لديك ملف 171/1] يضم الصور المقطعة بالصفحة ويضم الروابط التي أضفتها 
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الحصول على أكواد ال 5) بواسطه الفوتوشوب 
اتوت ري نر الكت عر الكدار حت لد يجيه كي تكردا ين هده مشر نا لين و الحصية 
نسخ اكواد ال 655. 
يمكن استخدام هذه الميزة في الحصول على كود 055 لطبقة معينة او تدريج الوان معين 
ونحوها 
يجب بداية تحويل الصورة او التدريج إلى تطبقة لكي يتمكن الفوتوشوب من بناء كود 055 لها 


من قائمة /ع/إ3 ا 


نختار 055 /لام60 








لماع ذا 
055 بزم00) 
...]ع لاق ا عقء أمنانا 


2 ) لت 411-06 *: # 4 عغعاع0) 


'+ا) جع ]اذ 6لا 5ق غرممعط عاء انان 
' +1 ) جع ]الاك جزابثر ...كش غرممعط 


...اع لزقا علمممع8 
4 عابؤد عنزة ا 


وهكذا يظهر الكود بعد نسخه لهذا التدريج بحسب حفظه كصورة 86م 


(”عصم.0 ععلاقا”)1كنلا :عع0-138انامععكاءع63؟. 4 0_عمعلاق ا 


3650101 :0051110م؟ 
“م0 :1+ع1؟ 

“م0 :م0]؟ 

“م900 :طغ10ا؟ 

“م600 :غطع1ع0؛؟ 

1 :كاع2-10؟ 


1 





ملاحظة : هذا الكود يمثل حجم الصورة بعد نسخ كود 055 أي انه ليس 
تدرج الألون إنما تنسيق الصورة هذه في الصفحة 
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الجافا سكريبت في الفوتوشوب 
كما تحدثنا عن الجافا سكريبت ؛ الفوتوشوب يوفر التعامل مع السكريبتات 
من قائمة ه11ع اختر 521/1015 


: 517131 ]نا 
1 زه زرفت 











امععععورن عوهدرا 


8 مركم 
3815| بطصورغط اآاث عغاعاعن] أمهردما 


اجاح جععز طاو جغايثر .مما عاع 
ماع 8ع رعنزه | ااثر معتواع مقط سه تدع 
ععاعداة] اآخثر معخاواع لجاع ممم 


تا ) +1 حك ]ار ممما عونا اخمرمعم 








اك وا قصهلبةا عتمععط أماعذ 






عات 2 
55212 دس 15 نيدن ١‏ ٍ 


كعاط الااناءاانا عام ااا هما 
5ح 5131511 


قو قمعا 


ثم حدد البرنامج النصي من القائمة. تتضمن قائمة البرامج النصية كل 
ملفات البرامج النصية المحفوظة بملحقات أسماء الملفات .وز أو .“وز 


والمحفوظة في مجلد 


مهوطادمغوطط عط14800أاع165005١(856<)‏ دماأ2 طوععمءعط 0:١‏ 


2015 )32 86565١515 





3 ب برنامج 5 ' ٠‏ ل ى موقع آخر 
من قائمة ه11 اختر 5م501 ثم اختر 8]010/56 
وتصفح وصولا إلى البرنامج النصي. 


عير محمد وعد مدر . 000 


:10م عاع ‏ 07:08 م 2016/02/08 براصم0 عأمقع5 غمعيع لل 
»عام عاع 2 07:08 م 2016/02/08 برام0 عغمتع5 عاءهغ5 لال 














8) لبك ... أملء035و[ عطولم 2 ... 12:05 2015/05/29 »و20 16 دلوم 8نم !>" 
338 ...] م3:35[ عطمهلم .... 12:05 2015/05/29 #كزء ومقطع علمما/! اقصمة أ لممك ‏ ,©" 
68 343 ...] 4م303511[ عطملم ‏ .... 12:05 2013/05/29 »كل المع طاكق وخمه© ‏ /©* 
1016 ...] 6م303571[ عطمل0م .... 12:05 2015/05/29 »ك كع نزق ا بطأمصمع الشعئءاء 0 /** 
506 ...] م3:35[ عطولمشٌ ‏ ...12:05 2015/05/29 »زعا 16 كعنزة ا غرمم5 !©" 
18 29 ...] م3:35[ عطولم ‏ ... 12:05 2015/05/29 »كع اطة] منمامهمارمامع ممع /©* 
2018 ...] 6م 3/3571[ عطملم ... 12:05 2015/05/29 »كزع وقططا 8 ©" 
8 19 ...] م3:35[ عطهلم .... 12:05 2015/05/29 »كز كاعع ماع ,عنزة | الث معغنواع ,©" 
8 18 ...] م30:35[ عطهلم .... 12:05 2015/05/29 »كزكماءدا/! ال معغواع ,©" 
78 ...6 4م3351[ عطملم 2 ... 12:05 2015/05/29 كزع ماع مع و !©" 
68 83 ...] 6م303571[ عطملث ‏ ...12:05 2013/05/29 “15 مدعععم8 عوهمطا ©" 
5218 ...] أمء5ق::3[ عطملم .... 12:05 2015/05/29 »*دزكع اط 16 كممممع ععيزها ©" 
252168 ...] أم3571/ا3[ عطول0م .... 12:05 2015/05/29 «كل20 10 كممممع ععيزها !©" 
8 29 ... أم3571/ا3[ عطولم .... 12:05 2015/05/29 »وز اعع17م© كمع ١‏ /*" 
1018 ... أم11ء5ق/او[ عطملث .... 12:05 2013/05/29 »2120115 وما /©* 
8 4 ...] 6م 3/3571[ عطملم ... 12:05 2015/05/29 »كزعاء غ5 مغمز ععاط وما ,©" 
668 19 ...] م3:35[ عطملم .... 12:05 2015/05/29 «كل طلا م عوءا/ا ©" 
68 0ك ...] 6م71ء3:035[ عطملم .... 12:05 2013/05/29 كزع وا موغمطم !>" 
68 49 ...] أم11ء30035[ عطملم . ...12:05 2015/05/29 #كلاء وقصوا/اا كتمعيظ غمرق5 :©" 

9 


78 ...؟ ملع 5قم31ل[ عطاول م .. 12:05 2015/05/29 6ك[ كع 563161561 
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إستخدام الفيجوال بيك 


للفوتوشوب 





كما وسيق ذكريا القوتوشوب يدهم العديد عن اللغات البرهجية , نحد هذه 
اللغات والتي اعتبر ها من المفضلات لدي لغة ال +عم.ء1وج8 |وننل5أ/١‏ 


اذ تتوفر عملية اتصال محاكي هذي اللغة 561010.761 |3ناد5أل/ا مع 
مكتاب الفوتوشوب التي تنصب مع البرنامج بشكل تلقائي . 


بداية سنقوم بعمل بعض المشاريع المتربطة بالفوتوشوب والفيجول بيسك . 


يمكن استخدام اي اصدار من الفيجوال ستوديو لكن انا يتوفر لدي نسخة 
0 و 2012 





474 


/ 01 


أ عالاا. 


المرفقة بالفوتوشوب . مثال لأحد هذه التطبيقات أتمتة الفوتوشوب . 











هومصطلح يشير إلى استعمال الحاسبات ومكائن والأجهزة الآلية وذلك 
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اتمتة الفوتوشوب 

اذا كان لديك مجموعة من الصورء لكنها لا تبدو جميلة. وقد ترغب في 
زيادة التباين أو تحسين الألوان لهذه الصور . من خلال الفوتوشوب يمكنك 

جعل وظيفة التباين التلقائي لتصحيح الصور وجعلها رائعة. لا توجد 

مشكلة إذا كانت تلك عبارة عن عشرات من الصور. ماذا لو كان هناك 

مئات أو حتى الاف ؟ فتح كل صورة في برنامج فوتوشوبء وتطبيق 
نقوم بأتمتة جميع هذه المهام والسماح للفوتوشوب بالعمل الجاد بينما نحن 

الموضوع ممكن بواسطة برمجة برنامج بسيط بالفيجوال بيسك 


نفتح أو لا الفيجوال ستوديو ونعمل مشروع جديد كالمعتاد ونسميه 
55410 مثلا 

علينا في البداية اضافة ال 1.1137 أءءز0 «مرهاوهغ20 المكتاب الالتي تنصب 

تلقائياً مع الفوتوشوب 

من قائمة غ+عهزممط( نختار ععمعمع1ه/ 300 


من صفحة 000 نبحث عن اضافات ال مهطو5مغ0طط 0066م 


ممممهط دتعحم كل والالا لمر [] 


أمعععة | ععسم8 | عععزممم | الالل؟ | [غلن. - 
..أمصغوه) عملا مث قد 


طغوظ حوداعع ا اناعم[ عوردلا للرحلن» »اإررامى لدع مومممروع لبر 3 

بادك كته لصالا ناا .. عصيزا ثاءا صصمعظام ناو اأطدعععمم 7 ظ 2 
1ض ١‏ د لل يت اناعصملبةا عمف لع 
اع تك يك أعيهنه ل مالالاات 1.0 للقعطنا عمنز! ذنا ممعم 
مكلك كه لمالا لكا 7 تمحازا عمتجا امخودمع عححم باع مصخ عقن نامث م 
ج) كعاط موعروممظات 9.0 ...طنا أععرطن 9.0 ممطاءمؤغمزظ عطاملم 2 5 - 
نا | سانا عبن 310 دراك مرا عملم تر + اذ + انا .لمعا معلا مهم إنننا 
ج ععااط مصرورودورظات 10 ..عرطن 15نك نان ممطعمغوطت عحاو مر اسم . ا إل يك 

9 1 مم الا+انن) تع ]| وصلككوع مخ 
نا كعاط حصورو وات 10 ..عصيزا 5اناك نان ممطدومؤعول5ظ عطممم 1 
6 ععااع ممدروممطاتع 0 بمدمطنا عمير؟ 1.0 عع ص اباشقع ده اععرممظ لمعا علساعيط 
جا كعاط حصوءومر”ظات ا.3 “قطنا عميزا ثاءك امكدم ناوخ ععارع ااثر سبيممةه لق 


قعاط مروعودعظطات 10 مصولط امعمغوعظ ممماصيحره نالصسطاه 
ي ذا كقعاط حرهعودعظات ث1 سنا عصترزا ناا ععواعاما_الانت)_ | اكاك 
2 * مقع معمعقع كا جاع ابا امامثر 


مقع وعععكاع 8 وامم 





ككاع]| »تمطامه | اععروعظ لاععماع م 





أعع مه : كع لزع مره ملؤم 
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ملاحظة : اذا واجهتك مشاكل ورفض البرنامج اضافة المكتبات قم بإضافة 
المكتبة الأولى فقط رمدءط1| +عءزط0 9.0 مرهمطومغ0 رطم 
جميل » والأن لنتوكل على الله ونبدأ في مشروعنا 
الأن لنستطيع استخدام مكتبات الفوتوشوب التي أضفناها يجب علينا 
تعريف الفيجوال ستوديو عليها واستيرادها وذلك بعمل 000016 


ويتم وضع ذلك اهمع معع مأ 366م630065 مه0طدومغ0طم 


م0050 1110015 


الأن لدينا عنصرين للعمل ال 11©>31+101مم مهوطدوه0غمطم 
211لا >0 مهط5ه0غ+هطط 6 غ1ع036 


لذلك نقوم بتعريفهم في 2548010 61355 ©11طنلم 


0 0116م . م0ط5ه0غ+ه0طط 5م مم53م 0111] 


171 الا 100 . م80510+ه0ط2 485 5006م 0111] 





صورة للتوضيح 
ماسهده 314 | 


مهاد هعلطت 5 زمنارا 


مغأادشكم 01355 13طيم كح | 
11ت ء هط . 1003015 1لا . لاء 5351 115115 





مممع لع2قعممععم ملع ودعنا سمط كسملنح 1لا 08 


31 11ممم . ممادمغامطم كم ممووم قلدن] 
111 72اناعهنا . ممادوغاومطم كم عمنادم دنا 


الآن ننتقل إلى واجه البرنامج قليلآً حيث نقوم بإضافة 2 من الأداة 
218 1ع 5 امع 8م010 


ومادتنعءوسمرقرعوامع ‏ [ت 


ونقوم بتسميتهما إلى 10 8 ممح 


م[ وماد معوهومم قرع لامع كه ممم ماود اد نامعو رومع لامع أ 
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الأن للعمل على الواجهة نحتاج إلى إضافة : 
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بالنسة تبي اشير يضوة لك ياد إضدنات إخرى 





م[ دا عدوم 8ع واد [ك مد كاوه ادا عدوم 8رعلادع كه 
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مرحلة الكود 
كود ال 10230 مع 
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كودال +1<«ع للخروج 
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كود ال +2جخ5 لبداية العملية 
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ولا 2011.16 1< ) 6621165 . /نا1801عع011. 10 > ع5+2108 85 ()51165 011 
”7 
5+ 15 512128 85م 1+ طعوع عرمع 
(1+)2عم0.مم53م - عناوم 
د اعلا اغ2ثم . مم0طدمغمطط 5م علا ا ارمع" "الا 0111] 
(اع/ا3 اث . م0طدمغ+هط2 ر“اعلا3اع11غ+ع4. 5002م )عملا1 © 
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كود الباتش 
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علا 1 - لاعم550ع')مملاك . 1م6310 
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الأن زر ال ممع 


5 © 31/الا8ة رخع7.0566اع كلاد 85 عأعلمع5 31ل/الا8 )»ا 011©_(ازمع امعط اباك عغ3/ازمم 
>1 011 . الأمعع+ضعغط 5ع01مول (دعع م مع/اع , الاع 5 لاك 
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وأخيراً زر ال 10 


5 © 31لالا8ة رخأعع[0 . لاع 5لاد5 85 'اعلمع5 31ل/الا8)>اء10_)11مغط اباد عغ3/ازمم 
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( ) 013108انداهمطك . 13108160ا2ع كننامع قامع010] 
"١"‏ + طغخ023عم8+عع1ع5. 1310810ا2عدنامم8مع5010 - أالاع1 .6810 
باك لمع 
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فتح صورة على الفوتوشوب بواسطة الفيجوال بيسك 
من أكثر الاسئلة المهم كيفية فتح صورة بالفيجوال بيسك داخل 
الفوتوشوب 
كالمعتاد نفتح مشروع جديد ونستورد مكتاب الفوتوشوب كما سبق 
وفعلنا 


نضع في ال 6©21م66 
نضع في ال 01355 ©11طلظ مايلي 


0 0116م . م0 256005 485 ممخمم250+0510 0111] 


171 الا 00!. م0 طدكه0غ+هم0طط 485 ع02زام0 1005م 0111] 
“اع لاج اع 81 . مم0 طد5م0غ+همطط 5ق ععلا3 "الا 0111] 





الأن نعمل على الواجهة نقوم بإضافة زرين أحدهما للفتح والأخر 
للخروج 


| كرك ]تتم منههم مهمه له | 


كاعملن لهاع 





كود الفتح 
20+65 2-2 1122 لاعلا - ممخمم0آ5ه0+مطم 


013/15 .» 2501310510065 - 5ع013108الا13م015ا. ممخمم0ط5ه0+مطم 
1+5 'لا3 1م 5015م . 525113108110065 - 5ع0131608/ا131م15ا 213/63 . ممخمم0آ05+مطم 
("08مم. ع١‏ : عرابط المكان الذي توجد به الصورة " )معم0. مم4مم0ط5م0غ+ه0ط5 - عولاممطدمغمطم 





كود الإنهاء 


(5 صو5)ع1138ع512ع5 . ©ع0نام هط 5ه مام 


()ع60105.عه00مهطدهم هلام 
()+001.ممخممهط5ه60+مطم 
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4» 
اخام. 
مق ياؤن الث تعالى أن يلون بذا اللتاب ذو فاءرة علميد وأن يلون 


قر ناسب ميخ المسقويان التتدييرةة وأخشق قر عامدة تحن فوم 
التطوير وايتكار ادوات للك 

أوعو في بالرمة وامغفزق 

مار 51 على | لفيسبوك موا ودراذدت 


أ الدين : إسلام سل مده 
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